<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const canvas = document.createElement("canvas");
      canvas.width = 600;
      canvas.height = 400;
      document.body.append(canvas);
      const context = canvas.getContext("2d");

      //   context.filter = "drop-shadow(10px , 10px , 10px , 4px , red)";
      //   context.filter = "invert(50%)";

      //   context.arc(100, 100, 50, 0, 2 * Math.PI);
      //   context.lineWidth = 10;
      //   context.stroke();

      const img = document.createElement("img");
      img.src = "./images/1.jpg";
      img.onload = () => {
        // context.filter = "blur(4px)";
        // context.filter = "brightness(50%)";
        // context.filter = "contrast(500%)";
        // context.filter = "drop-shadow(10px 10px 10px 6px #000)";
        // context.filter = "grayscale(1)";
        // context.filter = "hue-rotate(270deg)";
        // context.filter = "invert(100%)";
        // context.filter = "saturate(0%)";
        // context.filter = "sepia(100%)";
        // context.filter = "opacity(50%)";

        // context.translate(300, 200);
        // context.rotate((45 * Math.PI) / 180);
        // context.drawImage(img, 100, 100, 450, 450, -100, -100, 200, 200);
        context.drawImage(img, 100, 100, 450, 450, 100, 100, 200, 200);
      };

      //   context.globalCompositeOperation = "luminosity";
      //   context.globalCompositeOperation = "multiply";
      //   context.globalCompositeOperation = "lighter";
      //   context.globalCompositeOperation = "source-over";
      //   context.globalCompositeOperation = "source-in";

      //   context.beginPath();
      //   context.arc(200, 100, 55, 0, 2 * Math.PI);
      //   context.fillStyle = "red";
      //   context.fill();

      //   context.beginPath();
      //   context.arc(165, 160, 55, 0, 2 * Math.PI);
      //   context.fillStyle = "green";
      //   context.fill();

      //   context.beginPath();
      //   context.arc(235, 160, 55, 0, 2 * Math.PI);
      //   context.fillStyle = "blue";
      //   context.fill();
    </script>
  </body>
</html>
